<!DOCTYPE html>
<html lang="en">
<head>
    <!--    <meta charset="UTF-8">-->
    <title>主页</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--  <title>博客列表</title>-->
    <script src="js/jquery.min.js"></script>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/cssLunbo.css">
</head>
<body>
<div class="nav">
    <img src="img/head1.jpg" alt="">
    <span>My Space</span>
    <!-- 空白元素 实现占位 -->
    <div class="spacer"></div>
    <!--    <a href="blog_list.html">主页</a>-->
    <!--    <a href="">我的作品</a>-->
    <!--    <a href="blog_edit.html">博客</a>-->
    <!--    <a href="">关于我</a>-->
    <!--    <a href="logout">退出</a>-->
    <a href="index.html">主页</a>
    <a href="mywork.html">我的作品</a>
    <a href="blog_list.html">博客</a>
        <a href="aboutme.html">生活碎片</a>
    <a href="logout">退出</a>
</div>
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="left" style="display: none">
        <!-- 表示整个用户的信息区域 -->

    </div>
    <!-- 右侧内容详情 -->
    <div class="middle" style="width: 980px">
        <div class="swiper">
            <div class="pic active" id="pic"><img src="img/i1.jpg" alt=""></div>
            <div class="pic" id="pic"><img src="img/i2.jpg" alt=""></div>
            <div class="pic" id="pic"><img src="img/i3.jpg" alt=""></div>
            <div class="pic" id="pic"><img src="img/i4.jpg" alt=""></div>
            <div class="pic" id="pic"><img src="img/i5.jpg" alt=""></div>
            <div class="leftBtn">《</div>
            <div class="rightBtn">&nbsp;》</div>
            <!-- 底部圆形按钮-->
            <ul class="circle">
            </ul>
        </div>

        <div class="news">
            <h3>我的新闻</h3>
            <p>
                我是西安理工大学一名数字媒体技术专业的学生。喜欢手工、运动、数码。我希望通过不断奋斗，创造出自己的精彩。
            </p>
            <p>
            <h3>哲理名言</h3>
            <p>
                人生如同道路。最近的捷径通常是最坏的路。<br>
            <p style="text-align: right;">——培根</p>
            </p>
            <p>命运总是不如人意。但往往是在无数的痛苦中,在重重矛盾和艰辛中，才使人成熟起来。
                <br>
            <p style="text-align: right;">——路遥</p>
            </p>

        </div>
    </div>
    <div class="right">
        <div class="timezone">
            <h2 class="h2">时间如流水</h2>

            <div class="align">
                <div class="clock">
                    <span id="h">99</span>
                    <span>:</span>
                    <span id="m">99</span>
                    <span>:</span>
                    <span id="ss">99</span>
                    <!--                    &nbsp;&nbsp;&nbsp;-->
                    <span id="i1">早晨</span>
                </div>
                <h3>
                    <p id="i2">一日之计在于晨。</p>
                </h3>
                <div class="calendar">
                    <span id="year">99</span>
                    <span>年</span>
                    <span id="month">99</span>
                    <span>月</span>
                    <span id="date">99</span>
                    <span>日</span>
                    <!--                    &nbsp;&nbsp;&nbsp;--><br>
                    <span id="week">周</span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<style>
    /*.swiper{*/
    /*    border-radius: 10px;*/
    /*    overflow: hidden;*/
    /*    margin: 0 auto;*/
    /*    width: 482px;*/
    /*    height: 250px;*/
    /*}*/
    /*.pic{*/
    /*    width: 482px;*/
    /*    height: 250px;*/
    /*    position: absolute;*/
    /*    opacity: 0;*/
    /*    transition: all 1s;*/
    /*}*/
    .news {
        border: #00c4ff 2px dashed;
        margin: 30px 32px;
        /*background-color: #0a001f;*/
    }
</style>

<script type="text/javascript" src="js/jsLunbo.js"></script>
<script type="text/javascript" src="js/jsTime.js"></script>

